<template>
  <el-card>
    <template #header>
      <h3 v-text="t('HTML module')"></h3>
    </template>
    
    <!-- 入口名称 -->
    <el-row :gutter="8" style="align-items: center;">
      <el-col :span="5">
        <span v-text="t('Entry name')"></span>
      </el-col>
      <el-col :span="12">
        <el-select 
          v-model="store.entryName"
          style="width: 100%;"
        >
          <el-option 
            v-for="module in store.htmlModules" 
            :key="module" 
            :label="module"
            :value="module"
          />
        </el-select>
      </el-col>
      <el-col :span="7">
        <el-button 
          type="primary" 
          @click="store.openDialog"
          :disabled="!store.canOpenDialog"
          style="width: 100%;"
        >
          {{ t('Open dialog') }}
        </el-button>
      </el-col>
    </el-row>

    <!-- 界面配置（仅用于打开对话框） -->
    <el-row :gutter="8" style="align-items: center;">
      <el-col :span="5">
        <span v-text="t('View config')"></span>
      </el-col>
      <el-col :span="12">
        <el-input 
          v-model="store.viewConfig"
          style="width: 100%;"
          spellcheck="false"
        />
      </el-col>
      <el-col :span="7">
        <el-switch
          v-model="store.showHelpForHtmlModules"
          :active-text="t('Show help')"
        />
      </el-col>
    </el-row>

    <!-- 开发用面板 -->
    <el-row :gutter="8" v-if="store.showDevelPanel">
      <el-col :span="24">
        <HtmlModuleEmbedder 
          style="height: 400px;"
          ref="embedderRef"
        />
      </el-col>
    </el-row>

    <!-- 框架开发临时调试用 -->
    <!-- <el-row :gutter="8">
      <el-col :span="24">
        <HtmlModuleEmbedder 
          style="height: 200px;"
          ref="sideEmbedderRef"
        />
      </el-col>
    </el-row> -->

  </el-card>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { biBridge } from '@/appox/bi-bridge'
import { useHtmlModuleStore } from '@/stores/htmlModule'
import { useLanguageStore } from '@/stores/language'
import { HtmlModulesPath } from '@/utils/constants'
import HtmlModuleEmbedder from '@/components/common/HtmlModuleEmbedder.vue'

const store = useHtmlModuleStore()
const languageStore = useLanguageStore()
const embedderRef = ref(null)
const sideEmbedderRef = ref(null)

watch(() => store.embedderEntryName, async (newValue) => {
  if (newValue) {
    while (!embedderRef.value) {
      await new Promise(resolve => setTimeout(resolve, 10))
    }
    const contentWindow = embedderRef.value.setConfig(newValue, store.embedderBridgeId, null)
    if (contentWindow) biBridge.registerModuleContentWindow(store.embedderBridgeId, contentWindow)
  }
  else {
    if (embedderRef.value) embedderRef.value.reset()
  }
})

// 翻译函数
const t = (key) => {
  const translations = {
    'HTML module': {
      'en': 'HTML module',
      'zh': 'HTML模块'
    },
    'Entry name': {
      'en': 'Entry name',
      'zh': '入口名'
    },
    'View config': {
      'en': 'View config',
      'zh': '界面配置'
    },
    'Open dialog': {
      'en': 'Open dialog',
      'zh': '打开对话框'
    },
    'Show help': {
      'en': 'Show help',
      'zh': '显示帮助'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

onMounted(async () => {
  if (sideEmbedderRef.value) {
    const sideInstInfo = await biBridge.initializeModule(HtmlModulesPath, 'my_page', '', false)
    const sideContentWindow = sideEmbedderRef.value.setConfig('my_page', sideInstInfo.bridgeId, null)
    if (sideContentWindow) biBridge.registerModuleContentWindow(sideInstInfo.bridgeId, sideContentWindow)
  }
  await store.loadHtmlModules()
})
</script> 